<script setup>
import { onMounted } from 'vue';
import { useToolsStore } from '@/store/tools'
import { useRoute, useRouter,RouterLink } from 'vue-router'

const router = useRouter()
const route = useRoute()

//tools store
const toolsStore = useToolsStore()

onMounted(() => {
	if (route.query && route.query.value) {
		//底部导航跳转过来的则定位到响应位置
		document?.getElementById(route.query.value)?.scrollIntoView();
	} else {
		//其他位置跳转过来不需要定位的则定位到顶部
		document?.querySelector('#collect')?.scrollIntoView()
	}
})
</script>

<template>
	<div>
		<div v-for="cate in toolsStore.toolsCate">
			<!-- cate title -->
			<div class="tool-cate flex flex-row mb-2" :id="'cate_' + cate.id">
				<div class="w-1" style="background-color: var(--el-color-primary);"></div>
				<div class="tool-cate-title ml-2">{{cate.title}}</div>
			</div>
			<!-- card -->
			<div>
				<el-row :gutter="20">
					<el-col :xs="24" :sm="12" :md="6" :lg="6" :xl="4" v-for="tool in cate.list" class="mb-6">
						<router-link :to="'tools' + tool.url">
							<div class="tool-card hover:shadow-md hover:-translate-y-2 duration-300 bg-white">
								<div>
									<div style="float: left;margin-right: 10px;">
										<el-image class="tool-logo" :src="tool.logo"></el-image>
									</div>
									<div>
										<el-text tag="p" class="tool-title" style="display: block">{{tool.title}}</el-text>
										<el-text>{{tool.cate}}</el-text>
									</div>
								</div>
								<el-divider style="margin: 10px 0;" />
								<el-text line-clamp="2">{{tool.desc}}</el-text>
							</div>
						</router-link>
					</el-col>
				</el-row>
			</div>
		
		</div>
		<!-- 返回顶部 -->
		<el-backtop :right="10" :bottom="50" />
	</div>
</template>

<style>
/* 工具卡片 */
.tool-logo{
	width: 40px;
	height: 40px;
}
.tool-title{
	font-weight: 600;
	font-size: 1.125rem;
	color: black;
}
.tool-card{
	height: 100%;
	/**border: 1px solid var(--color-border);**/
	padding: 10px 20px;
	border-radius: 10px;
}
.tool-cate{
	padding: 10px 10px;
	.tool-cate-title{
		font-size: 1.5rem;
		font-weight: 800;
	}
}
</style>